'use client'
import AiMarketSearch from "@/app/components/ai-market-search";
import ButtonType from "@/app/components/button-Type";
import CardType from "@/app/components/card-type";
import ImageRiver from "@/app/components/imageRiver";
import { LJIcon } from "@/public/icon";
import {  Badge, Button,  Select,  SelectItem,  Tab, Tabs } from "@nextui-org/react";
import React,{ useState } from "react";

const marketType = [
    {
        name: "娱乐免费"
    },
    {
        name: "商用付费"
    }
]
const CardList = [
    {
        image: '/cardImage.png',
        text: "美食"
    },
    {
        image: '/cardImage.png',
        text: "油画"
    },
    {
        image: '/cardImage.png',
        text: "植物"
    },
    {
        image: '/cardImage.png',
        text: "产品"
    },
    {
        image: '/cardImage.png',
        text: "交通"
    },
    {
        image: '/cardImage.png',
        text: "建筑"
    },
    {
        image: '/cardImage.png',
        text: "游戏"
    },
    {
        image: '/cardImage.png',
        text: "体育"
    },
    {
        image: '/cardImage.png',
        text: "动漫"
    },
    {
        image: '/cardImage.png',
        text: "美食"
    },
    {
        image: '/cardImage.png',
        text: "节日"
    },
    {
        image: '/cardImage.png',
        text: "装潢"
    },
    {
        image: '/cardImage.png',
        text: "抽象"
    },
    {
        image: '/cardImage.png',
        text: "古代"
    }, 
    {
        image: '/cardImage.png',
        text: "装置"
    },
    {
        image: '/cardImage.png',
        text: "雕塑"
    }
]
const selectList = [
    {
        label: '按时间',
        value: "0"
    },
    {
        label: '按点赞',
        value: "1"
    },
    {
        label: "按收藏"
    }
]
// Mock 网络图片数组
const imageList = [
    { url: 'https://via.placeholder.com/200x200' },
    { url: 'https://via.placeholder.com/140x200' },
    { url: 'https://via.placeholder.com/90x200' },
    { url: 'https://via.placeholder.com/60x200' },
    { url: 'https://via.placeholder.com/175x330' },
    { url: 'https://via.placeholder.com/90x120' },
    { url: 'https://via.placeholder.com/200x200' },
    { url: 'https://via.placeholder.com/140x200' },
    { url: 'https://via.placeholder.com/90x200' },
    { url: 'https://via.placeholder.com/60x200' },
    { url: 'https://via.placeholder.com/175x330' },
    { url: 'https://via.placeholder.com/90x120' },
    { url: 'https://via.placeholder.com/200x200' },
    { url: 'https://via.placeholder.com/140x200' },
    { url: 'https://via.placeholder.com/90x200' },
    { url: 'https://via.placeholder.com/60x200' },
    { url: 'https://via.placeholder.com/175x330' },
    { url: 'https://via.placeholder.com/90x120' },
  ];

function PicMarket({Sort,setSort=()=>{}}){
    return (
        <div className="market_container">
            <div className="market-type-select mt-9 mb-[17px]">
                <ButtonType list={marketType}></ButtonType>
            </div>
            <div className="mt-[14px] mb-[38px]">
                <CardType list={CardList}></CardType>
            </div>
            <div className="market-select ml-[35px]">
                <Select
                    aria-label="Sort"
                    labelPlacement="outside"
                    className="max-w-xs"
                    selectedKeys={Sort}
                    disableSelectorIconRotation
                    placeholder="排序"
                    selectorIcon={<LJIcon.Selector />}
                    onSelectionChange={setSort}
                >
                    {
                        selectList.map((item)=>{
                            return <SelectItem key={item.value} value={item.value}>
                                {item.label}
                            </SelectItem>
                        })
                    }
                </Select>
            </div>
            <div className="mark-image-river">
                <ImageRiver list={imageList}></ImageRiver>
            </div>
        </div>
    )
}

export default function MarketPage(){
    const [Sort,setSort] = useState(new Set(["0"]));
    const [tab,setTab] = useState("pic_market");
    function handleChangeSelect(e){
        setTab(e)
    }
    return (<div className="market_page_container">
        <AiMarketSearch title="AI 绘图，一步到位， 就用 iThinkAi"/>
        <div className="market-header-select mx-5 mt-1 flex items-center">
            <Tabs disabledKeys={['draw_market','novel_market','ai_market']} onSelectionChange={handleChangeSelect}>
                <Tab key={"pic_market"} title="图片集市">
                </Tab>
                <Tab key={"draw_market"} title="绘本集市">
                </Tab>
                <Tab key={"novel_market"} title="小说推文">
                </Tab>
                <Tab key={"ai_market"} title="数字人集市">
                </Tab>
            </Tabs>
            <div className="created-button flex-1 flex justify-end">
                <Button radius="none" color="primary" className="py-[14px] px-[48px] text-[14px] disabled:bg-gray-400" disabled>去创作</Button>
            </div>
        </div>
        {
            tab == "pic_market" ? <PicMarket Sort={Sort} setSort={setSort}/>:<></>
        }
    </div>)
}